<template>
  <div>
    <!-- 走马灯 -->
    <div>
       <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="items in imgdata" :key="items">
      <h3 class="medium"><img :src="items.img"  width="300px" height="200px"></h3>
    </el-carousel-item>
  </el-carousel>
    </div>

    <!-- 
    内容精选 -->
    <div>
      <el-row>
        <h4>内容精选</h4>
      </el-row>

      <el-row class="menu-card" type="flex" justify="start">
        <div style="float: left">
          <el-col
            style="flex: none"
           
          >
            <el-card :body-style="{ padding: '0px' }"  v-for="(item,cc) in showData" :key="cc" style="float:left;margin-left:20px;">
              
                <router-link :to="{path:'detail/'+item.CId}">
                <img :src="item.CImg" class="image" style="width: 232px; height: 232px" />
                <div style="padding: 14px" class="menu-card-detail">
                  <strong>菜品名称:{{item.CName}}</strong><br />
                  <span>{{item.CNum}} 评论</span><br />
                  <router-link to="" tag="em"> 作者:{{item.CWriter}} </router-link>
                </div>
              </router-link>
              
            </el-card>
          </el-col>
        </div>
      </el-row>
    </div>
    <div class="waterfall" ref="waterfall">
      <slot></slot>
      <div class="waterfall-loading" ref="loading">
        <i class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgdata:[{
        url:"",
        img:"http://localhost:55943/Images/猫鼬斩.jpg"
      },{
         url:"",
        img:"http://localhost:55943/Images/百变怪.jpg"
      },{
         url:"",
        img:"http://localhost:55943/Images/阿勃梭鲁.jpg"
      }
      ],
      showData:[]
    };
  },
  methods: {
    showfoodfirst()
    {
        this.$axios.get('http://localhost:55943/api/ShowFood').then(res=>{
          this.showData=res.data;
        })
    }
  },
  created() {
    this.showfoodfirst();
  },
};
</script>






<style scope>
.menu-card {
  flex-wrap: wrap;

  margin-bottom: 20px;
  margin-left: 22px;
}

.menu-card-detail {
  display: block;
  height: 50px;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

span {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #999;
}
em {
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  color: #ff3232;
}
.nav-link {
  display: inline-block;
}
.waterfall-loading {
  width: 100%;
  height: 20px;
  text-align: center;
}
</style>
